<!-- templates/stories/index.html -->
{% extends 'base.html' %}

{% block title %}首页 - AI故事生成器{% endblock %}

{% block content %}
<div class="plaza-header">
    <div class="plaza-header-content">
        <h1 class="plaza-title">故事广场</h1>
        <p class="plaza-subtitle">在这里发现精彩故事，激发无限想象</p>
        
        <!-- 搜索框 -->
        <div class="search-container">
            <form id="searchForm" class="search-form">
                <input type="text" id="searchInput" name="q" placeholder="搜索故事标题、内容或作者..." class="search-input">
                <button type="submit" class="search-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </form>
        </div>
    </div>
</div>

<div class="plaza-container">
    <!-- 精选故事区域 -->
    <div class="featured-section">
        <div class="section-header">
            <h2 class="section-title">精选故事</h2>
            <a href="#" class="more-link">更多 ></a>
        </div>
        <div class="stories-grid">
            <!-- 精选故事卡片 -->
            <div class="story-card featured-card">
                <div class="story-image">
                    <img src="https://placehold.co/500x400/6a11cb/ffffff?text=精选故事" alt="精选故事">
                    <div class="featured-badge">精选</div>
                </div>
                <div class="story-content">
                    <h3 class="story-title">魔法森林的秘密</h3>
                    <p class="story-excerpt">在遥远的魔法森林深处，住着一只会说话的小狐狸，它掌握着森林中所有植物的秘密。一天，小狐狸发现森林的魔法正在逐渐消失...</p>
                    <div class="story-author">作者：Alice</div>
                    <div class="story-meta">
                        <div class="rating">
                            <span class="stars">
                                <!-- 评分星标 -->
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ddd" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                            </span>
                            <span class="rating-text">4.0</span>
                        </div>
                        <div class="story-stats">
                            <span class="stat-item">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M3 9H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M9 21V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                128
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="story-card featured-card">
                <div class="story-image">
                    <img src="https://placehold.co/500x400/2575fc/ffffff?text=热门故事" alt="热门故事">
                    <div class="featured-badge">热门</div>
                </div>
                <div class="story-content">
                    <h3 class="story-title">太空漫游记</h3>
                    <p class="story-excerpt">公元3000年，人类已经可以在宇宙中自由穿梭。年轻的宇航员小明踏上了探索未知星球的旅程，他将面对怎样的挑战...</p>
                    <div class="story-author">作者：Bob</div>
                    <div class="story-meta">
                        <div class="rating">
                            <span class="stars">
                                <!-- 评分星标 -->
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                            </span>
                            <span class="rating-text">5.0</span>
                        </div>
                        <div class="story-stats">
                            <span class="stat-item">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M3 9H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M9 21V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                256
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="story-card featured-card">
                <div class="story-image">
                    <img src="https://placehold.co/500x400/ff6b6b/ffffff?text=推荐故事" alt="推荐故事">
                    <div class="featured-badge">推荐</div>
                </div>
                <div class="story-content">
                    <h3 class="story-title">雨中的邂逅</h3>
                    <p class="story-excerpt">那是一个雨天，她在咖啡店门口忘记带伞，是他主动为她撑起了伞，从此两个人的命运交织在一起...</p>
                    <div class="story-author">作者：Cathy</div>
                    <div class="story-meta">
                        <div class="rating">
                            <span class="stars">
                                <!-- 评分星标 -->
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ddd" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                </svg>
                            </span>
                            <span class="rating-text">4.2</span>
                        </div>
                        <div class="story-stats">
                            <span class="stat-item">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M3 9H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M9 21V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                97
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 保持原有的分类展示区 -->
    <div class="featured-section">
        <div class="section-header">
            <h2 class="section-title">全部故事</h2>
        </div>
        
        <!-- 分类标签切换 -->
        <div class="tabs-container">
            <ul class="tabs">
                <li class="tab active" data-category="all">全部</li>
                <li class="tab" data-category="奇幻">奇幻</li>
                <li class="tab" data-category="科幻">科幻</li>
                <li class="tab" data-category="爱情">爱情</li>
                <li class="tab" data-category="悬疑">悬疑</li>
                <li class="tab" data-category="童话">童话</li>
            </ul>
        </div>
        
        <!-- 故事列表 -->
        <div class="stories-container" id="stories-container">
            <!-- 示例故事卡片 -->
            <div class="story-card" data-category="奇幻">
                <h3>魔法学院的秘密</h3>
                <p class="story-excerpt">在霍格沃茨魔法学院的深处，隐藏着一个不为人知的秘密，只有最勇敢的学生才能揭开这个谜团...</p>
                <div class="story-meta">
                    <span class="category">奇幻</span>
                    <span class="author">作者：David</span>
                    <span class="date">2025-09-05</span>
                </div>
            </div>
            
            <div class="story-card" data-category="科幻">
                <h3>时间旅行者</h3>
                <p class="story-excerpt">科学家发明了时间机器，但每次穿越都会带来意想不到的后果，他必须找到回到原来时间线的方法...</p>
                <div class="story-meta">
                    <span class="category">科幻</span>
                    <span class="author">作者：Emma</span>
                    <span class="date">2025-09-03</span>
                </div>
            </div>
            
            <div class="story-card" data-category="爱情">
                <h3>海边的约定</h3>
                <p class="story-excerpt">他们在海边相遇，许下了永恒的诺言，但命运却让他们分离，多年后他们能否再次相遇...</p>
                <div class="story-meta">
                    <span class="category">爱情</span>
                    <span class="author">作者：Frank</span>
                    <span class="date">2025-09-01</span>
                </div>
            </div>
            
            <div class="story-card" data-category="悬疑">
                <h3>消失的证人</h3>
                <p class="story-excerpt">法庭即将开庭，关键证人却神秘失踪，侦探必须在开庭前找到证人并揭开背后的阴谋...</p>
                <div class="story-meta">
                    <span class="category">悬疑</span>
                    <span class="author">作者：Grace</span>
                    <span class="date">2025-08-28</span>
                </div>
            </div>
            
            <div class="story-card" data-category="童话">
                <h3>会说话的小熊</h3>
                <p class="story-excerpt">森林里有一只会说话的小熊，它帮助迷路的小动物们找到回家的路，成为了森林里的明星...</p>
                <div class="story-meta">
                    <span class="category">童话</span>
                    <span class="author">作者：Henry</span>
                    <span class="date">2025-08-25</span>
                </div>
            </div>
            
            <div class="story-card" data-category="奇幻">
                <h3>龙之谷的传说</h3>
                <p class="story-excerpt">在遥远的龙之谷中，最后一条龙即将死去，年轻的勇士必须找到拯救龙族的方法...</p>
                <div class="story-meta">
                    <span class="category">奇幻</span>
                    <span class="author">作者：Ivy</span>
                    <span class="date">2025-08-20</span>
                </div>
            </div>
            
            <div class="story-card" data-category="科幻">
                <h3>机器人的心</h3>
                <p class="story-excerpt">一个高级人工智能机器人开始质疑自己的存在意义，它渴望拥有人类的情感和灵魂...</p>
                <div class="story-meta">
                    <span class="category">科幻</span>
                    <span class="author">作者：Jack</span>
                    <span class="date">2025-08-18</span>
                </div>
            </div>
            
            <div class="story-card" data-category="爱情">
                <h3>星空下的告白</h3>
                <p class="story-excerpt">在星空下，他终于鼓起勇气向她表白，但她的回答却出乎所有人的意料...</p>
                <div class="story-meta">
                    <span class="category">爱情</span>
                    <span class="author">作者：Kate</span>
                    <span class="date">2025-08-15</span>
                </div>
            </div>
            
            <div class="story-card" data-category="悬疑">
                <h3>午夜的电话</h3>
                <p class="story-excerpt">每天午夜，主人公都会接到一个神秘电话，电话里的声音声称知道他隐藏的秘密...</p>
                <div class="story-meta">
                    <span class="category">悬疑</span>
                    <span class="author">作者：Leo</span>
                    <span class="date">2025-08-10</span>
                </div>
            </div>
            
            <div class="story-card" data-category="童话">
                <h3>彩虹桥的故事</h3>
                <p class="story-excerpt">雨后出现的彩虹其实是连接两个世界的桥梁，小精灵们通过彩虹桥来到人间帮助善良的人们...</p>
                <div class="story-meta">
                    <span class="category">童话</span>
                    <span class="author">作者：Mia</span>
                    <span class="date">2025-08-05</span>
                </div>
            </div>
            
            <div class="story-card" data-category="奇幻">
                <h3>魔法师的学徒</h3>
                <p class="story-excerpt">一个普通的孩子意外成为大魔法师的学徒，他必须在短时间内掌握魔法技能来拯救世界...</p>
                <div class="story-meta">
                    <span class="category">奇幻</span>
                    <span class="author">作者：Nina</span>
                    <span class="date">2025-08-01</span>
                </div>
            </div>
            
            <div class="story-card" data-category="科幻">
                <h3>异星来客</h3>
                <p class="story-excerpt">一艘外星飞船降落在地球上，外星访客带来了先进的科技，但也带来了未知的危险...</p>
                <div class="story-meta">
                    <span class="category">科幻</span>
                    <span class="author">作者：Oliver</span>
                    <span class="date">2025-07-28</span>
                </div>
            </div>
        </div>
        
        <!-- 分页器 -->
        <div class="pagination-container">
            <div class="pagination-info">
                <span>第 <span id="current-page">1</span> 页，共 <span id="total-pages">2</span> 页</span>
            </div>
            <ul class="pagination" id="story-pagination">
                <li class="page-item disabled" id="prev-page">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                <li class="page-item" id="next-page">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}